﻿
@{
    ViewBag.Title = "角色列表";
}
<div class="wrapper wrapper-content animated fadeInUp">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>角色列表</h5>
                    <div class="ibox-tools">
                        <a onclick="add()" class="btn btn-primary btn-xs">新增角色</a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row m-b-sm m-t-sm">
                        <div class="col-md-1">
                            <button type="button" id="loading-example-btn" class="btn btn-white btn-sm"><i class="fa fa-refresh"></i> 刷新</button>
                        </div>
                        <div class="col-md-11">
                            <div class="input-group">
                                <input type="text" placeholder="请输入角色名" class="input-sm form-control"> <span class="input-group-btn">
                                    <button type="button" id="search" class="btn btn-sm btn-primary"> 搜索</button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="project-list">
                        <table id="table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@section Js{
    <script type="text/javascript">

        $(function() {
            getTableData();

            $("#loading-example-btn").click(function() {
                $table.bootstrapTable('refresh', { url: '/Account/GetRoleList' });
            });
            $("#search").click(function() {
                $table.bootstrapTable("");
            });
        });

        function queryParams(params) {
            return params;
        }

        var $table = $('#table');

        //初始化表格
        function getTableData() {
            $table.bootstrapTable({
                url: "/Account/GetRoleList",
                dataType: "json",
                pagination: true, //分页
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 20, 50, 100, 200, 500],
                idField: "roleId", //标识哪个字段为id主键
                singleSelect: false,
                queryParams: queryParams,
                queryParamsType: '',
                showRefresh: false,
                showPaginationSwitch: false,
                search: false, //搜索框
                searchOnEnterKey: false,
                clickToSelect: false, //是否启用点击选中行
                sidePagination: "server", //服务端处理分页
                columns: [
                    {
                        title: '序',
                        width: 30,
                        align: 'center',
                        falign: 'center',
                        formatter: function(value, row, index) {
                            return ($table.bootstrapTable("getOptions").pageNumber - 1) * $table.bootstrapTable("getOptions").pageSize + index + 1;
                        }
                    },
                    {
                        title: '角色名',
                        field: 'roleName',
                        align: 'center',
                        valign: 'middle',
                        width: 450
                    },
                    {
                        title: '创建时间',
                        field: 'createDate',
                        align: 'center',
                        formatter: function(value, row, index) {
                            return Common.formatterDateTime(value);
                        }
                    },
                    {
                        title: '是否隐藏',
                        field: 'roleDisplay',
                        align: 'center',
                        formatter: function(value, row, index) {
                            return value == "1" ? "显示" : "隐藏";
                        },
                        cellStyle: function(value, row, index, field) {
                            var color = row.roleDisplay == "0" ? "red" : "green";
                            return {
                                css: {
                                    "color": color
                                }
                            }
                        }
                    },
                    {
                        title: '操作',
                        field: 'Id',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var a = '<button type="button" onclick="edit(' + row.roleId + ')" class="btn btn-outline btn-primary btn-xs">编辑</button>';
                            var name = '显示';
                            if (row.roleDisplay == "1") {
                                name = '隐藏';
                            }
                            var b = '<button type="button" onclick="disable(' + row.roleId + ',\'' + name + '\')" class="btn btn-outline btn-primary  btn-xs">' + name + '</button>';
                            var c = '<button type="button" onclick="del(' + row.roleId + ')" class="btn btn-outline btn-primary btn-xs">删除</button>';
                            var d = '<button type="button" onclick="menuSet(' + row.roleId + ',\'' + row.roleName + '\')" class="btn btn-outline btn-primary btn-xs">权限分配</button>';
                            return a + b + c + d;
                        }
                    }
                ]
            });
        }
        //新增
        function add() {

            layer.open({
                type: 2,
                area: ['700px', '300px'],
                title: '角色-新增',
                fixed: false, //不固定
                content: ['/Account/RoleEdit', 'no']
            });

            //addTab("/Account/SysUserEdit", "角色-新增");
        }
        //编辑
        function edit(id) {
            layer.open({
                type: 2,
                area: ['700px', '300px'],
                title: '角色-编辑',
                fixed: false, //不固定
                content: ['/Account/RoleEdit?id=' + id, 'no']
            });
        }
        //隐藏或显示
        function disable(id, name) {
            layer.confirm('确认' + name + '当前角色', { icon: 3, title: '提示' }, function(index) {
                //do something
                $.getJSON("/Account/RoleChangeDisplay?id=" + id, function (json) {
                    if (json.result == "success") {
                        layer.msg(name + "成功", { icon: 1, time: 2000 }, function () {
                            $table.bootstrapTable('refresh', { url: '/Account/GetRoleList' });
                        });
                    } else {
                        layer.msg(json.msg, { icon: 5, time: 2000 });
                    }
                });
                layer.close(index);
            });

        }
        //删除
        function del(id) {
            layer.confirm('确认删除当前角色', { icon: 3, title: '提示' }, function(index) {
                $.getJSON("/Account/RoleDelete?id=" + id, function (json) {
                    if (json.result == "success") {
                        layer.msg(json.msg, { icon: 1, time: 2000 }, function () {
                            $table.bootstrapTable('refresh', { url: '/Account/GetRoleList' });
                        });
                    } else {
                        layer.msg(json.msg, { icon: 5, time: 2000 });
                    }
                });
            });

        }
        //菜单权限设置
        function menuSet(id, roleName) {
            location.href = "/Menu/MenuRoleSet?roleId=" + id + "&roleName=" + encodeURIComponent(roleName) + "&backUrl=/Account/RoleList";
        }
    </script>
}